<template>
	<div>
		<div class="temp-link clearfix">
			<a href="javascipt:;" v-for="item in tabData" @click="selectTabs(item.tab_item)" :class="{active:currentView==item.tab_item}">{{ item.title }}</a>
		</div>
		<transition name="fade" mode="out-in"><component :is="currentView"></component></transition>
	</div>
</template>

<script>
	import Analysis from './AnalysisCom.vue'  //  疾病分析及管理目标
	import Plan from './PlanCom.vue'			//   干预计划
	import LifeStyle from './LifeStyleCom.vue'		//  生活方式及改善建议
	export default {
		components:{
			Analysis,
			Plan,
			LifeStyle
		},
		data(){
			return {
				currentView: "Analysis",
				tabData: [
					{ title: '疾病分析及管理目标', tab_item: 'Analysis' },
					{ title: '干预计划', tab_item: 'Plan' },
					{ title: '生活方式及改善建议', tab_item: 'LifeStyle' }
				]
			}
		},
		methods:{
			selectTabs(tab){
				console.log(tab)
				this.currentView = tab;
			}
		}
	}
</script>

<style lang="less">
.temp-link {
  border-bottom: 1px solid #dddee1;
  margin-bottom: 24px;

  a {
    float: left;
    padding: 0 20px;
    height: 60px;
    color: #495060;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    margin-bottom: 0;

    &:hover,
    &.active {
      border-bottom-color: #0b9595;
    }
  }
}
</style>